<template>
  <!-- 同步ERP店铺 -->
  <a-modal v-model:visible="showSyncDialog" title="同步ERP店铺" title-align="start" :ok-loading="submitLoading" :on-before-ok="submitData" @cancel="closedDialog">
    <a-form :model="formInfo" ref="formRef" :rules="rules">
      <a-form-item field="sellerId" label="SellerId" label-col-flex="100px">
        <a-input v-model="formInfo.sellerId" placeholder="请输入店铺SellerId" allow-clear />
      </a-form-item>
      <a-form-item field="shopName" label="店铺名称" label-col-flex="100px">
        <a-input v-model="formInfo.shopName" placeholder="请输入店铺名称" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { syncErpShopInfo } from '@/api/system'
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmits(['closed', 'success'])
  const showSyncDialog = ref(props.isShow)
  const formInfo = ref<any>({})
  const submitLoading = ref(false)
  const formRef = ref()
  const rules = ref({
    shopName: [{ required: true, message: '请输入店铺名称' }],
    sellerId: [{ required: true, message: '请输入店铺SellerId' }],
  })

  // 关闭弹窗
  function closedDialog() {
    emit('closed')
  }
  // 开始同步
  async function submitData() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    const res: any = await syncErpShopInfo(formInfo.value)
    if (!res) return false
    Message.success('同步成功')
    emit('success')
    closedDialog()
    return true
  }
</script>
